<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pick Apples</title>
    <style type="text/css">
    html,body{
        margin:0;
        padding: 0;
        position:fixed;
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content:center;
    }
    *{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
        }
        .apple{
            position: absolute;
            width: 82px;
            height: 95px;
        }
        .apple img{
            width: 82px;
            height: 95px;
        }
        .apple p{
            color: #fff;
            position: absolute;
            left: 0;
            top: 5px;
            width: 80px;
            text-align: center;
            font-size: 30px;
            cursor: move;
        }
        .voice{
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .mask{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, .5);
            text-align: center;
        }
        .btn{
            margin-top: 300px;
            padding: 40px;
            font-size: 30px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/script.js?t=4"></script>
</head>
<body>
    <div id="tree" style="position: absolute; width: 800px;height: 680px;background: url(img/tree.png);flex-grow: 1;">
        <div id="basket_one" style="position: absolute;left: 0;bottom: -50px; width: 300px;height: 200px;">
            <img src="img/basket.png" style="width: 300px;height: 200px;">
        </div>
        <div id="basket_two" style="position: absolute;right: 0;bottom: -50px; width: 300px;height: 200px;">
            <img src="img/basket_past.png" style="width: 300px;height: 200px;">
        </div>
        <div data-pos="left" data-left="207" data-top="100" class="apple" style="left: 207px;top: 100px;">
            <img src="img/apple.png" />
            <p>7:40</p>
        </div>
        <div data-pos="left" data-left="101" data-top="179" class="apple" style="left: 101px;top: 179px;">
            <img src="img/apple.png" />
            <p>8:35</p>
        </div>
        <div data-pos="right" data-left="33" data-top="346" class="apple" style="left: 33px;top: 346px;">
            <img src="img/apple.png" />
            <p>6:15</p>
        </div>
        <div data-pos="right" data-left="163" data-top="350" class="apple" style="left: 163px;top: 350px;">
            <img src="img/apple.png" />
            <p>12:25</p>
        </div>
        <div data-pos="left" data-left="370" data-top="62" class="apple" style="left: 370px;top: 62px;">
            <img src="img/apple.png" />
            <p>3:45</p>
        </div>
        <div data-pos="right" data-left="509" data-top="123" class="apple" style="left: 509px;top: 123px;">
            <img src="img/apple.png" />
            <p>4:05</p>
        </div>
        <div data-pos="left" data-left="617" data-top="209" class="apple" style="left: 617px;top: 209px;">
            <img src="img/apple.png" />
            <p>6:45</p>
        </div>
        <div data-pos="right" data-left="635" data-top="335" class="apple" style="left: 635px;top: 335px;">
            <img src="img/apple.png" />
            <p>11:05</p>
        </div>
        <div id="time" style="position: absolute;width: 180px;height: 80px;top:50%;left: 50%;margin-left: -90px;margin-top: -80px; background-color: #f89382;line-height: 80px;text-align: center;font-size: 70px;color: #fff;cursor: default;font-weight: bold;z-index: 2;display: none;">0s</div>
        <div id="tip" style="position: fixed;top: 0;left: 0;right: 0;bottom: 0; background-color:rgba(0,0,0,.5);text-align: center;font-size: 60px;color: #00f;cursor: default;z-index: 1;display: block;">

            <input id="restart" type="button" style="position: relative;background: #f89382;
            top:50%;margin-top: -100px; width: 200px;height: 200px;font-size: 50px;border: none;border-radius: 100%;color: #fff;font-weight: bold;" value="Start">
        </div>
    </div>
    <audio class="voice" id="good_voice" src="audio/great.mp3"></audio>
    <audio class="voice" id="no_voice" src="audio/error.mp3"></audio>
</body>
</html>